TypeScript Napredni Tipi: Obvladovanje Predložnih Literalnih in Pogojnih Tipov

Mednarodni Primer: Obravnavanje Različnih Oblik Zapisa Datumov

Različne regije sveta uporabljajo različne oblike zapisa datumov. Uporabite lahko pogojne tipe za obravnavanje teh različic.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (Implementacija bi obravnavala različne oblike zapisa datumov)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Neveljavna oblika zapisa datuma");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Tip: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Tip: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Tip: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // Dostop do leta, vedoč, da bo tam

Ta primer uporablja pogojne tipe za definiranje različnih funkcij za razčlenjevanje datumov na podlagi določene oblike zapisa datuma. Tip ParseDate zagotavlja, da ima vrnjeni objekt pravilne lastnosti na podlagi oblike zapisa.

Kombiniranje Predložnih Literalnih in Pogojnih Tipov

Prava moč se pojavi, ko kombinirate predložne literalne tipe in pogojne tipe. To omogoča neverjetno močne manipulacije tipov.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // Poenostavljeno za demonstracijo
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//Primer funkcije, ki sprejme tip
function processEvent(event: T): ExtractEventPayload {
    //V pravi implementaciji bi dejansko poslali dogodek.
    console.log(`Processing event ${event}`);

    //V pravi implementaciji bi bila vsebina (payload) odvisna od tipa dogodka.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//Upoštevajte, da so povratni tipi zelo specifični:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//Če uporabite druge nize, dobite never:
// const someOtherEvent = processEvent("someOtherEvent"); // Tip je `never`

Najboljše Prakse in Premisleki

• Naj bo Preprosto: Čeprav so zmogljivi, lahko ti napredni tipi hitro postanejo kompleksni. Prizadevajte si za jasnost in vzdržljivost.
• Temeljito Testirajte: Zagotovite, da se vaše definicije tipov obnašajo, kot je pričakovano, s pisanjem obsežnih enotskih testov.
• Dokumentirajte Svojo Kodo: Jasno dokumentirajte namen in vedenje vaših naprednih tipov, da izboljšate berljivost kode.
• Upoštevajte Učinkovitost: Prekomerna uporaba naprednih tipov lahko vpliva na čas prevajanja. Profilirajte svojo kodo in optimizirajte, kjer je to potrebno.